<template>
	<view class="page-container">
		<!--返回-->
		<image src="/static/image/return.png" @click="goPage" data-uri="/pages/business/business" data-type="2" class="return"></image>
	    
		<!--跳转公海馆-->
		<view class="nav-list hig-seas" @click="goPage" data-uri="/pages/drift/hig-seas2">
			<u-icon name="gonghai"  custom-prefix="qxl-icon" color="#2979ff" size="34"></u-icon>
			<text>公海馆</text>
		</view>
		
		<!--船GIF-->
		<image src="/static/image/ship.gif" style="width: 300rpx;left:5%;top:32%" mode="widthFix" class="lanwans"></image>
		
		<!--气球GIF-->
		<image src="/static/image/balloon.gif" style="width: 300rpx;left:60%;top:15%" mode="widthFix" class="lanwans"></image>
		
		<!--捞一个GIF图-->
		<image v-if="pickingBottle" src="/static/image/lans2.gif" style="width: 300rpx;" mode="widthFix" class="lanwans"></image>
		
		<view class="bottom-nav">
			<view class="p30 disf">
				<view @click="throwOut" class="nav-list">
					<u-icon name="faxiaoxi" custom-prefix="qxl-icon" color="#2979ff" size="34"></u-icon>
					<text>扔一个</text>
				</view>
				<view @click="goPage" data-uri="/pages/drift/my-bottle" class="nav-list pr" style="width: 196rpx;">
					<view>
						<u-icon name="piaoliuping" custom-prefix="qxl-icon" color="#19be6b" size="36"></u-icon>
						<text>我的瓶子</text>
					</view>
					<view v-if="commentNum > 0" class="pa f26 colfff imfos_num">{{commentNum > 99 ? 99 : commentNum}}</view>
				</view>
				<view @click="bottleFee" class="nav-list">
					<u-icon name="bulao" custom-prefix="qxl-icon" color="#ff9900" size="38"></u-icon>
					<text>捞一个</text>
				</view>
			</view>
			
		</view>
		
		<!--捞到瓶显示用户信息(最新) 有图 1100rpx 高，无图 400rpx 高-->
		<u-popup v-model="showUserMask" mode="center" width="660rpx" :height="user.image ? '1100rpx' : '400rpx'" :closeable="true" border-radius="10">
			<view class="user-box">
				<view style="position: relative;">
					<view class="headers disf p30">
						<view class="headers-img"><image :src="user.head_pic" style=""></image></view>
						<view class="f34">
							<view class="b">{{user.nickname}}</view>
							<view>
								<view  v-if="user.sex > 0" :class="'sex f26 '+(user.sex == 2 ? 'sex2' : '')">
									<u-icon name="nv" custom-prefix="qxl-icon"  size="30" style="font-weight: bold;"/>
									<text class="ml5">{{user.sex == 1 ? '男' : '女'}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="content">{{user.content}}</view>
					
					<view v-if="user.image" class="p30" style="height: 700rpx;width:630rpx;text-align: center;overflow: hidden;">
						<image :src="user.image"  mode="heightFix"></image>
					</view>
					
					<view class="bottoms">
						<view class="custom-min-button" @click="closeUserBox">扔回大海</view>
						<view class="custom-min-button ml20" @click="fishUser" :data-id="user.id" :data-user_id="user.user_id" style="background: #19be6b;">私聊</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!--捞到瓶显示用户信息-- 
		<u-mask :show="showUserMask" @click="closeUserBox"></u-mask>
		<view v-if="showUserBox" class="user-box">
			<view style="position: relative;">
				<view class="close" @click="closeUserBox">
					<u-icon name="shibai" custom-prefix="qxl-icon" color="#19be6b" size="50"></u-icon>
				</view>
				<view class="headers disf p30">
					<view class="headers-img"><image src="/static/profile/2.jpg" style=""></image></view>
					<view class="f34">
						<view class="b">我是一个好</view>
						<view>
							<view class="sex f26">
								<u-icon name="nv" custom-prefix="qxl-icon"  size="30" style="font-weight: bold;"/>
								<text class="ml5">女</text>
							</view>
						</view>
					</view>
				</view>
				<view class="content">
					我是一个好我是一个好我是一个好我是一个好我是一个好我是一个好我是...
				</view>
				<view class="bottoms">
					<view class="custom-min-button" @click="closeUserBox">扔回大海</view>
					<view class="custom-min-button ml20" @click="fishUser" data-id="" style="background: #19be6b;">私聊</view>
				</view>
			</view>
		</view>-->
		
		<!--扔瓶子弹层-->
		<u-popup v-model="throwOutMask" mode="center" width="600rpx" height="550rpx" :closeable="true" border-radius="8">
			<view class="p30">
				<form @submit="submit">
				   <view class="b">
					   <u-icon name="piaoliuping" custom-prefix="qxl-icon"  size="30" color="#19be6b" style="font-weight: bold;"/>扔一个出去
					</view>
				   <view class="form-list mt60 pr">
				   	<input type="text" name="content" maxlength="250" placeholder="*想说点啥~~~" placeholder-style="color: #8f8f8f;" />
				   </view>
				   <view class="form-list disfr-lr bbo pt20" style="height: 100rpx;">
				   	  <view style="color:#8f8f8f;" class="pl30">你的城市</view>
					  <view @click="setCity" class="pr10">
					     {{city ? city : '选择'}}
						 <u-icon name="arrow-right" color="#999999"></u-icon>
					  </view>
					  <input type="text" :value="city" name="city" class="hide"/>
				   </view>
				   <view class="form-list disfr-lr pt20" style="height: 100rpx;">
				   	  <view style="color:#8f8f8f;" class="pl30">
						  传个图片<u-icon v-if="image" @click="removeImage" name="close" color="red"></u-icon>
					  </view>
						<view @click="chooseImage" class="pr10">
						   <image v-if="image" :src="image" style="height: 30rpx;" mode="heightFix"></image>
						   <text v-else>上传</text>
						   <u-icon name="arrow-right" color="#999999"></u-icon>
						</view>
						<input type="text" :value="image" name="image" class="hide"/>
				   </view>
				   <view class="form-list mt20" style="text-align: center;">
				   	<button form-type="submit" class="custom-min-button" style="width: 300rpx;height: 70rpx;line-height: 70rpx;border-radius: 20px;">扔出去</button>
				   </view>
				</form>
			</view>
		</u-popup>
		
		<loading :loading="not_load"/><!--加载状态-->
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';

//页面加载时
const not_load=ref(false);
const commentNum=ref(0);
onLoad(async (options)=>{
	
});
//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
	let name=uni.$vuex.state.globalData.businessCity.name;
	city.value=name || '';
	
	loadPage({},false);
});

const loadPage= async (options,isPage)=>{
	let ret = await uni.$get('/appapi-driftbottle-getcommentnums',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	not_load.value=true;
	commentNum.value=ret.data.comment_num;

};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
const goPage=(e)=>{
	uni.$utils.dataSetPage(e);
};
// 上传图片
const image=ref('');
const chooseImage=()=>{
	uni.chooseImage({
		count: 1,
		sizeType: ['original','compressed'],
		sourceType:['album','camera'],
		success:async (responent) => {
			not_load.value=false;
			let tempFile=responent.tempFilePaths[0];
			let ret = await uni.$uploadFile('/appapi-upload-image',tempFile,{});
			console.log(ret);
			not_load.value=true;
			image.value=ret.data.url;
		}
	})
};
//取消上传图片
const removeImage=()=>{
	image.value='';
};
//扔瓶子=======================
const city=ref('');
const throwOutMask=ref(false);
const throwOut=async()=>{
	throwOutMask.value=true;
};
const setCity=()=>{
	uni.$utils.goPage('/pages/city-index/city-index?drift=1');
};
const submit=async(e)=>{
	let form=e.detail.value;
	if(!form.content){
		uni.$utils.showToast('请说说你的心声');
		return;
	}
	not_load.value=false;
	let ret=await uni.$post('appapi-driftbottle-throwout',{},form);
	not_load.value=true;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	throwOutMask.value=false;
	uni.$utils.showToast(ret.info);
};
//开始捞瓶子===================
const pickingBottle=ref(false);
const user=ref({});
const bottleFee=async()=>{
	if(pickingBottle.value) return;
	pickingBottle.value=true;
	let ret=await uni.$get('appapi-driftbottle-getbottle');
	if(ret.error_code == -544444){
		pickingBottle.value=false;
		uni.$utils.showToast(ret.info);
		return;
	}
	setTimeout(()=>{
		pickingBottle.value=false;
		if(ret.error_code != 0){
			uni.$utils.showToast(ret.info);
			return;
		}
		showUserMask.value=true;
		showUserBox.value=true;
		user.value=ret.data;
		
	},3000);
};
//捞到瓶子=====================
const showUserMask=ref(false);
const showUserBox=ref(false);
//关闭
const closeUserBox=()=>{
	showUserMask.value=false;
	showUserBox.value=false;
};
// 私聊用户
const fishUser=async(e)=>{
	closeUserBox();
	not_load.value=false;
	let id=e.currentTarget.dataset.id;
	let user_id=e.currentTarget.dataset.user_id;
	//console.log(id,user_id);return;
	let ret=await uni.$get('appapi-driftbottle-getbottlechat',{id:id,user_id:user_id});
	not_load.value=true;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	let conv='';
	let uri='';
	conv=getConversationID(user_id);
	if(conv.conversationID){
		uri='/pages/chat-single/chat-single?conversationID='+conv.conversationID+'&nick='+conv.userProfile.nick+'&to='+user_id;
		uni.$utils.goPage(uri,0);
		return;
	}
	not_load.value=false;
	let str=uni.$appConfig['IM_PREFIX_MAKR']['da_zhao_hu']['rule']+'你好！漂流瓶朋友';
	uni.TIM.createTextMessage(0,user_id,str,(data)=>{
		setTimeout(()=>{
			conv=getConversationID(user_id);
			not_load.value=true;
			if(conv.conversationID){
				uri='/pages/chat-single/chat-single?conversationID='+conv.conversationID+'&nick='+conv.userProfile.nick+'&to='+user_id;
				uni.$utils.goPage(uri,0);
			}
		},500)
	});
};

//获取当前用户的会话ID
const getConversationID=(userId)=>{
	let list=uni.$vuex.state.globalData.conversationList;
	for(let i in list){
		if(list[i].type != 'C2C') continue;
		if(list[i].userProfile.userID == userId){
			return list[i];
		}
	}
	return {};
};
</script>

<style lang="scss">
	.page-container {
	  position: fixed; /* 固定定位 */
	  top: 0;
	  left: 0;
	  width: 100%;    /* 宽度100% */
	  height: 100%;   /* 高度100% */
	  background-image: url('/static/image/drift-bg2.gif'); /* 图片路径 */
	  background-size: cover;      /* 关键：覆盖整个容器 */
	  background-position: center; /* 居中显示 */
	  background-repeat: no-repeat; /* 禁止重复 */
	}
	.return{
		width: 65rpx;
		height: 65rpx;
		position: fixed;
		top:110rpx;
		left:40rpx;
	}
	.hig-seas{
		position: fixed;
		margin-top: 0 !important;
		margin-right: 0 !important;
		height: 70rpx !important;
		line-height: 70rpx !important;
		top:90rpx;
		right:40rpx;
	}
	.lanwans{
		position: fixed;
		left:30%;
		top:35%;
	}
	.bottom-nav{
		width: 600rpx;
		height: 200rpx;
		background: rgba(0, 0, 0, 0.3);
		position: absolute;
		bottom:120rpx;
		left:75rpx;
		border-radius: 6px;
	}
	.nav-list{
		background: rgba(255,255, 255,0.8);
		width: 190rpx;
		height: 80rpx;
		margin-right: 12rpx;
		margin-top: 30rpx;
		border-radius: 6px;
		font-size: 32rpx;
		text-align: center;
		line-height: 80rpx;
	}
	.user-box{
		/*width:650rpx;
		height: 390rpx;
		background: #fff;
		border-radius: 6px;
		position: fixed;
		top:40%;
		left:55rpx;
		z-index:21000;*/
		.close{
			position: absolute;
			right: -20rpx;
			top:-20rpx;
			background: #fff;
			border-radius: 50%;
			padding: 0;
			margin: 0;
			width: 50rpx;
			height: 50rpx;
		}
		.headers-img image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 6rpx;
		}
		.sex{
			display: inline-block;
			width: 100rpx;
			height: 46rpx;
			border-radius: 4px;
			color:#fff;
			text-align: center;
			line-height: 46rpx;
			background: #fa3534;
		}
		.sex2{
			background: #19be6b;
		}
		.content{
			padding: 30rpx;
			padding-top: 0;
			height: 120rpx;
		}
		.bottoms{
			text-align: center;
		}
		.custom-min-button{
			border-radius: 20px;
			width: 200rpx;
			height: 70rpx;
			font-size: 32rpx;
			line-height: 70rpx;
		}
	}
	.imfos_num{width: 40rpx;height: 40rpx;background: red;top:-16rpx;right: -10rpx;line-height: 40rpx;border-radius: 50%;}
</style>
